<template lang="pug">
    section(
        :class='sectionClasses',
        :style='{ backgroundImage: backgroundImage }'
    )
        slot
        sbpro-border(:border-type='borderType', :border-classes='borderClasses')
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { BorderType } from '@/models';
import SBProBorder from '@structural/border.vue';

@Component({
    components: {
        'sbpro-border': SBProBorder,
    },
})
export default class SBProPageSection extends Vue {
    @Prop() private sectionClasses!: string;
    @Prop() private borderType!: BorderType;
    @Prop({ default: 'text-white' }) private borderClasses!: string;
    @Prop() private backgroundImage!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
